<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits(['update:visible', 'submit'])

const mcpType = ref('server')
const githubUrl = ref('')
const isFullscreen = ref(false)

// 监听屏幕尺寸，决定是否使用全屏模式
onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

const checkScreenSize = () => {
  isFullscreen.value = window.innerWidth <= 768
}

// 计算属性用于处理对话框可见状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

const handleSubmit = () => {
  if (!githubUrl.value) {
    ElMessage.warning('请输入GitHub地址')
    return
  }
  
  emit('submit', {
    type: mcpType.value,
    githubUrl: githubUrl.value
  })
  
  // 重置表单
  mcpType.value = 'server'
  githubUrl.value = ''
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    width="600px"
    :fullscreen="isFullscreen"
    class="submit-dialog"
  >
    <div class="dialog-content">
      <h2 class="dialog-title">提交您的MCP {{ mcpType === 'server' ? 'Server' : 'Client' }}</h2>
      <p class="dialog-slogan">分享让AI更强大</p>
      
      <div class="form-container">
        <div class="form-item">
          <label>MCP类型</label>
          <div class="type-selector">
            <div
              class="type-option"
              :class="{ active: mcpType === 'server' }"
              @click="mcpType = 'server'"
            >
              <span class="emoji">🖥️</span>
              <span>Server</span>
            </div>
            <div
              class="type-option"
              :class="{ active: mcpType === 'client' }"
              @click="mcpType = 'client'"
            >
              <span class="emoji">📱</span>
              <span>Client</span>
            </div>
          </div>
        </div>
        
        <div class="form-item">
          <label>GitHub地址</label>
          <div class="github-input">
            <svg height="20" viewBox="0 0 16 16" width="20" class="github-icon">
              <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
            </svg>
            <el-input
              v-model="githubUrl"
              placeholder="请输入项目的GitHub地址"
            />
          </div>
        </div>
        
        <el-button
          type="primary"
          class="submit-button"
          @click="handleSubmit"
        >
          提交项目
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.submit-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

.submit-dialog :deep(.el-dialog__header) {
  display: none;
}

.submit-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.dialog-content {
  padding: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(10px);
}

.dialog-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.dialog-slogan {
  text-align: center;
  color: #6b7280;
  margin: 16px 0 40px;
  font-size: 16px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-item label {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.type-selector {
  display: flex;
  gap: 16px;
}

.type-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-option:hover {
  border-color: #818cf8;
}

.type-option.active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.type-option span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.github-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 12px;
  transition: all 0.3s ease;
}

.github-input:focus-within {
  border-color: #6366f1;
}

.github-input :deep(.el-input__wrapper) {
  background: transparent;
  box-shadow: none !important;
  padding: 0;
}

.github-input :deep(.el-input__inner) {
  height: 46px;
}

.submit-button {
  margin-top: 16px;
  height: 50px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border: none;
  font-weight: 500;
  font-size: 18px;
  transition: all 0.3s ease;
}

.submit-button:hover {
  background: linear-gradient(90deg, #818cf8, #9333ea);
  transform: translateY(-1px);
}

.submit-button:active {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  transform: translateY(1px);
}

.emoji {
  font-size: 24px;
  line-height: 1;
}

.github-icon {
  color: #333;
  width: 24px;
  height: 24px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .submit-dialog :deep(.el-dialog) {
    margin: 0 !important;
    max-width: 100%;
    border-radius: 0;
    height: 100%;
  }
  
  .submit-dialog :deep(.el-overlay) {
    background-color: white !important;
  }
  
  .dialog-content {
    padding: 16px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .dialog-title {
    font-size: 18px;
  }
  
  .dialog-slogan {
    font-size: 12px;
    margin: 8px 0 16px;
  }
  
  .form-container {
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  
  .form-item {
    width: 100%;
  }
  
  .form-item label {
    font-size: 13px;
    margin-bottom: 4px;
    text-align: center;
  }
  
  .type-selector {
    flex-direction: row;
    gap: 6px;
    justify-content: center;
  }
  
  .type-option {
    padding: 8px 6px;
    max-width: 45%;
    height: auto;
    min-height: 40px;
    gap: 4px;
  }
  
  .type-option .emoji {
    font-size: 16px;
  }
  
  .type-option span:not(.emoji) {
    font-size: 13px;
    font-weight: 600;
  }
  
  .github-input {
    padding: 0 6px;
    width: 100%;
    border-width: 1px;
  }
  
  .github-icon {
    width: 16px;
    height: 16px;
  }
  
  .github-input :deep(.el-input__wrapper) {
    width: 100%;
  }
  
  .github-input :deep(.el-input__inner) {
    height: 36px;
    font-size: 13px;
    width: 100%;
  }
  
  .submit-button {
    height: 38px;
    font-size: 14px;
    margin-top: 12px;
    width: 100%;
  }
}

/* 特小屏幕适配 */
@media screen and (max-width: 375px) {
  .dialog-content {
    padding: 12px 8px;
  }
  
  .dialog-title {
    font-size: 16px;
  }
  
  .dialog-slogan {
    font-size: 11px;
    margin: 6px 0 12px;
  }
  
  .type-option {
    min-height: 36px;
    padding: 6px;
  }
  
  .github-input :deep(.el-input__inner) {
    height: 32px;
    font-size: 12px;
  }
  
  .submit-button {
    height: 36px;
    font-size: 13px;
    margin-top: 10px;
  }
}
</style> 